<template>
    <div class="main el-mg-20">
        <!-- 表格过滤 -->
        <el-form
            :inline="true"
            :size="$formSize"
            class="table-filter el-box-init el-bkgd-white"
        >
            <el-form-item label="关键词" class="el-mg-r-30">
                <el-input
                    v-model="search.keywor"
                    clearable
                    placeholder="输入用户姓名或手机号"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="success"
                    round
                    icon="el-icon-search"
                    @click="onSearch"
                    >查询</el-button
                >
                <el-button
                    type="warning"
                    round
                    icon="el-icon-refresh"
                    @click="onReset"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <div class="table-wrap el-box-init el-bkgd-white">
            <!-- 操作按钮 -->
            <el-row class="table-btn el-pd-b-20">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :size="$btnSize"
                    v-if="isAuth('SYS_USER_ADD')"
                    @click="onAddOrUpdate()"
                >
                    新增
                </el-button>
            </el-row>

            <el-table
                v-loading="table.loading"
                :data="table.list"
                :size="$tableSize"
                stripe
                border
                ref="tableRef"
            >
                <el-table-column
                    prop="user_account"
                    label="用户名"
                    width="120px"
                >
                </el-table-column>

                <el-table-column prop="user_name" label="姓名" width="120">
                </el-table-column>

                <el-table-column prop="user_avatar_url" label="头像" width="80">
                    <template slot-scope="{ row }">
                        <el-popover
                            placement="right"
                            trigger="hover"
                            v-if="row.user_avatar_url"
                        >
                            <img
                                class="el-popover-img"
                                :src="row.user_avatar_url"
                            />

                            <img
                                class="el-popover-minImg"
                                slot="reference"
                                :src="row.user_avatar_url"
                            />
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column prop="user_email" label="Email">
                </el-table-column>

                <el-table-column prop="user_phone" label="手机">
                </el-table-column>

                <el-table-column prop="role_id" label="角色" width="100">
                    <template slot-scope="{ row }">
                        <span
                            v-for="item in roleList"
                            :key="item.id"
                            v-if="item.id == row.role_id"
                            >{{ item.name }}</span
                        >
                    </template>
                </el-table-column>

                <el-table-column prop="status" label="账号状态" width="100">
                    <template slot-scope="{ row }">
                        <el-tag :type="row.status === 0 ? '' : 'danger'">
                            {{ row.status === 0 ? "正常" : "冻结" }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="created_at" label="创建时间">
                    <template slot-scope="{ row }">
                        {{ row.created_at | formatTime }}
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    :width="$defaultActionWidth"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="{ row }">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="row.role_id != 1 && isAuth('SYS_USER_UPDATE')"
                            @click="onAddOrUpdate(row.id)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="row.role_id != 1 && isAuth('SYS_USER_DEL')"
                            @click="onDel(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 表格分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.currentPage"
                :page-sizes="table.pageSizes"
                :page-size="table.pageSize"
                :layout="table.layout"
                :total="table.total"
                background
            >
            </el-pagination>
        </div>

        <dialog-add-or-update ref="addOrUpdate" :id="table.rowId" />
    </div>
</template>


<script>
import { adminUser as Api } from "api";
import DialogAddOrUpdate from "./add-or-update.vue";

export default {
    components: {
        DialogAddOrUpdate,
    },
    data() {
        return {
            //查询
            search: {
                keywor: "",
            },

            roleList: [], // 角色列表

            //表格
            table: {
                loading: false,
                rowId: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },
        };
    },
    created() {
        this.getList();
        this.getRoleList();
    },
    methods: {
        /* 获取用户列表 */
        async getList() {
            const { code, data } = await this.$axios.get(Api.getList, {
                params: {
                    keywor: this.search.keywor,
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code === 200) {
                this.table.list = data.list;
                this.table.total = data.total;

                // 关闭加载提示
                this.table.loading = false;
            }
        },

        /* 获取角色列表 */
        async getRoleList() {
            const { code, data } = await this.$axios.get(Api.getRoleList);
            if (code === 200) {
                this.roleList = data;
            }
        },

        onSearch() {
            this.getList();
        },

        onReset() {
            this.search = {
                keywor: "",
            };
        },

        onAddOrUpdate(id) {
            this.table.rowId = id;
            this.$refs.addOrUpdate.visible = true; // 弹窗开关
        },

        async onDel(id) {
            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /* 每页多少条 */
        handleSizeChange(val) {
            this.table.loading = true;
            this.table.pageSize = val;
            this.getList();
        },

        /* 当前页  */
        handleCurrentChange(val) {
            this.table.loading = true;
            this.table.currentPage = val;
            this.getList();
        },
    },
};
</script>